<template>
  <div>
    <el-transfer
      v-model="roleUser"
      :render-content="renderLabel"
      :filterable="true"
      :filter-method="Userfilter"
      :props="{ key: 'id',
      label: 'name'}"
      :data="roleData"
      :titles="[$t('system.userList'),$t('system.distedUser')]"
    />
  </div>
</template>

<script>
import dataHelper from "@/utils/dataHelper";
import roleApi from "@/api/role";
export default {
  name: "SystemUserSetrole",
  components: {},
  model: {
    prop: "value",
    event: "valuechange"
  },
  props: {
    value: {
      type: Array
    },
    roleid: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      roleUser: [],
      roleData: []
    };
  },

  computed: {},
  watch: {},
  mounted() {
    dataHelper.queryHelper.query(this.$route.path, "system/user.entity", { $pagesize: -1 }).then(res => {
      this.roleData = res.data.rows;
    });
    dataHelper.queryHelper
      .query(this.$route.path, "system/user_role.entity", { roleid: this.roleid })
      .then(res => {
        this.roleUser = []
        res.data.rows.forEach((item, index) => {
          this.roleUser.push(item.userid)
        })
      });
  },
  methods: {
    Userfilter(query, item){
       return item.name.indexOf(query) > -1 || item.id.indexOf(query) > -1;
    },
    renderLabel(h, option) {
      return (
        <span>
          {option.id} | {option.name}
        </span>
      );
    },
    save() {
      const promise = roleApi.setRoleUser(this.roleid, this.roleUser.join(","));
      promise.then(res => {
        this.$message({
          message:this.$t("system.userSetSucc"),
          type: "success"
        });
      });
      return promise;
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scope>
</style>

